<script setup lang="ts">
  import { ref } from 'vue';
  import { useGuessList } from '@/composables'
  import { onLoad, onUnload } from "@dcloudio/uni-app";

  // 获取页面参数
  // const query = defineProps<{
  //   order_id : string
  // }>()

  const orderId = ref<string>()


  onLoad((option : any) => {
    if (option.order_id !== undefined) {
      orderId.value = option.order_id
    }
  })


  const goAbout = () => {
    uni.redirectTo({ url: `/pagesOrder/orderdetail/orderdetail?order_id=${orderId.value}` })
  }

  // 猜你喜欢
  const { guessRef, onScrolltolower } = useGuessList()
</script>

<template>
  <scroll-view enable-back-to-top class="viewport" scroll-y @scrolltolower="onScrolltolower">
    <!-- 订单状态 -->
    <view class="overview">
      <view class="status icon-checked">支付成功</view>
      <view class="buttons">
        <navigator hover-class="none" class="button navigator" url="/pages/category/category" open-type="switchTab">
          返回首页
        </navigator>
        <navigator hover-class="none" class="button navigator" @click="goAbout" open-type="redirect">
          查看订单
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .viewport {
    background-color: #f7f7f8;
  }

  .overview {
    line-height: 1;
    padding: 50rpx 0;
    color: #fff;
    background-color: #27ba9b;

    .status {
      font-size: 36rpx;
      font-weight: 500;
      text-align: center;
    }

    .status::before {
      display: block;
      font-size: 110rpx;
      margin-bottom: 20rpx;
    }

    .buttons {
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 60rpx;
    }

    .button {
      text-align: center;
      margin: 0 10rpx;
      font-size: 28rpx;
      color: #fff;

      &:first-child {
        width: 200rpx;
        border-radius: 64rpx;
        border: 1rpx solid #fff;
      }
    }
  }
</style>
